<template>
	<view class="save">
		<view class="banner">
			<image :src="banner" mode=""></image>
			<navigator url=".//pages/save/hdgz"><view>{{nav1}}</view></navigator>
		</view>
		<!--nav-top-->
		<view class="nav-top">
			<view class="head-nav" >
				<view style="width: 80rpx;color: #FF290D;font-weight: bold;">限时秒杀</view>
				<view class="" v-for="(item,index) in times" :key="index" :class="navIndex==index?'activite':''" @click="checkIndex(index)">
					<text>{{item.time}}</text>
					<text>{{item.text}}</text>
				</view>
			  
			</view>
			
		<scroll-view scroll-x="true" class="scroll-view " v-if="navIndex==index" v-for="(item,index) in item" :key="index">
			<view class="flex">
				 <view class="scroll-view1 flex" v-for="(items,indexs) in item.content" :key="indexs" @click="yhj">
		         <view class="sc-view1-left">
		    	  <text>{{items.one}}</text>
		    	  <text>{{items.two}}</text>
		        </view>
		       <view class="sc-view1-right">
		    	<text >{{items.three}}</text>
		       </view>
		    </view>
			</view>
		   
		   </scroll-view>
		</view>
		<!--nav-bottom-->
		<view class="nav-bottom">
			<view class="foot-nav">
				<scroll-view scroll-x="true" class="box flex"  >
					<view class="box_view" :class="navIndex1==index?'activite1':''" @click="checkIndex1(index)" v-for="(item,index) in nav" :key="index">
						<text>{{item.text}}</text>
					</view>
					
				
				</scroll-view>	
		    </view>
			<view v-if="navIndex1==0" class="navIndex">
				<view class="h2">{{biaoti}}</view>
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box" :key="index">
						<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="h2">{{biaoti1}}</view>
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box" :key="index">
						<view class="flth-left-top" @click="jumpDetail(item.id)"><image :src="item.one" ></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="h2">{{biaoti2}}</view>
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box3" :key="index">
						<view class="flth-left-top" @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="h2">{{biaoti3}}</view>
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box3" :key="index">
						<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="foot-h2">{{biaoti4}}</view>
			</view>
			<view v-if="navIndex1==1" class="navIndex">
					<view class="flth">
						<view class="flth-left" v-for="(item,index) in box" :key="index">
							<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
							<view class="flth-left-bottom">
								<text class="a">{{item.two}}</text>
								<text class="b">{{item.three}}</text>
								<view class="flth-left-foot">
									<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
									<view @click="qg1"><text>{{item.six}}</text></view>
								</view>
							</view>
						</view>
					</view>
				<view class="foot-h2">{{biaoti4}}</view>
			</view>
			<view v-if="navIndex1==2" class="navIndex">
					<view class="flth">
							<view class="flth-left" v-for="(item,index) in box1" :key="index">
								<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
								<view class="flth-left-bottom">
									<text class="a">{{item.two}}</text>
									<text class="b">{{item.three}}</text>
									<view class="flth-left-foot">
										<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
										<view @click="qg1"><text>{{item.six}}</text></view>
									</view>
								</view>
							</view>
					</view>
				<view class="foot-h2">{{biaoti4}}</view>
			</view>
			<view v-if="navIndex1==3" class="navIndex">
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box2" :key="index">
						<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="foot-h2">{{biaoti4}}</view>
			</view>
			<view v-if="navIndex1==4" class="navIndex">
				<view class="flth">
					<view class="flth-left" v-for="(item,index) in box3" :key="index">
						<view class="flth-left-top"  @click="jumpDetail(item.id)"><image :src="item.one"></image></view>
						<view class="flth-left-bottom">
							<text class="a">{{item.two}}</text>
							<text class="b">{{item.three}}</text>
							<view class="flth-left-foot">
								<view><text class="c">{{item.four}}</text><text class="d">{{item.five}}</text></view>
								<view @click="qg1"><text>{{item.six}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="foot-h2">{{biaoti4}}</view>
			</view>
		</view>
		<!--优惠券-->
		<view class="yhj" v-if="show">
			<view class="xc" @click="xc1">{{xc}}</view>
			<view class="jb">
				<view class="jb1">
					<text>{{jb1}}</text>
					<text>{{jb2}}</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-viewA">
					<view class="scroll-viewB" v-for="(item,index) in jb" :key="index">
						<view style="display: flex;">
							<view class="sc-viewA-left"><text>{{item.jb1}}</text></view>
							<view class="sc-viewA-right">
								<text>{{item.jb2}}</text>
								<text>{{item.jb3}}</text>
								<text>{{item.jb4}}</text>
							</view>
						</view>
					</view>
					<view style="text-align: center;color: #FFF0EA;padding: 20rpx 0;">{{ddl}}</view>
				</scroll-view>
				<view class="jb2"><text>{{qg}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banner:'../../static/img/banner.png',
			nav1:'活动规则',
			navIndex:0,
			listIndex:0,
			nav:[
				{id:'1',text:'全部'},
				{id:'2',text:'福利特惠'},
				{id:'3',text:'加油常卖'},
				{id:'4',text:'月油耗400'},
				{id:'5',text:'月油耗600'}
			],
			times:[
				{id:'1',time:'0:00',text:'已开始'},
				{id:'2',time:'12:00',text:'正在进行'},
				{id:'3',time:'16:00',text:'即将开始'},
				{id:'4',time:'20:00',text:'即将开始'}
			],
			item:[
				{
					id:'1',
				content:[
					{id:'1',one:'￥239',two:'自营满200减45元x10张',three:'抢购'},
					{id:'2',one:'￥168',two:'自营满300减100元x3张',three:'已抢光'},
					{id:'3',one:'￥308',two:'自营满400减150元x3张',three:'抢购'}
				]
				},
				{
					id:'2',
				content:[
					{id:'1',one:'￥239',two:'自营满200减45元x10张',three:'抢购'},
					{id:'2',one:'￥168',two:'自营满300减100元x3张',three:'已抢光'},
					{id:'3',one:'￥308',two:'自营满400减150元x3张',three:'已抢光'}
				]
				},
				{
					id:'3',
				content:[
					{id:'1',one:'￥168',two:'自营满300减100元x3张',three:'预约'},
					{id:'2',one:'￥308',two:'自营满400减150元x3张',three:'预约'},
					{id:'3',one:'￥239',two:'自营满200减40元x10张',three:'预约'}
				]
				},
				{
					id:'4',
				content:[
					{id:'1',one:'￥168',two:'自营满300减100元x3张',three:'预约'},
					{id:'2',one:'￥308',two:'自营满400减150元x3张',three:'预约'},
					{id:'3',one:'￥279',two:'自营满200减50元x10张',three:'预约'}
				]
				}
			],
			
			
		
			navIndex1:0,
			listIndex1:0,
			biaoti:'福利特惠',
			biaoti1:'加油常买',
			biaoti2:'月油耗400',
			biaoti3:'月油耗600',
			biaoti4:'-自营省钱专区-',
			box:[
				{ id:'1',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'},
				{id:'2',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	
			],
			box1:[
				{id:'1',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'},
				{id:'2',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	
			],
			box2:[
				{id:'1',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'},
				{id:'2',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	,
				{id:'3',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	,
				{id:'4',one:'../../static/images/w4.png',two:'2616元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	
			],
			box3:[
				{id:'1',one:'../../static/images/w4.png',two:'1620元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'},
				{id:'2',one:'../../static/images/w4.png',two:'1215元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	,
				{id:'3',one:'../../static/images/w4.png',two:'540元油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	,
				{id:'4',one:'../../static/images/w4.png',two:'1080元加油劵包',three:'300-109,大额油劵来袭',four:'￥1818',five:'已售3583',six:'抢购'}	
			],
			xc:'X',
			jb1:'450元优惠劵包',
			jb2:'劵包规则详见活动规则',
			ddl:'到底了',
			qg:'抢购',
			jb:[
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
				{jb1:'45元',jb2:'45元满减劵',jb3:'满200元使用',jb4:'领取后当天生效'},
			],
			show:false
		}
	},
	methods:{
		/*top*/
	  checkIndex(index){
	    this.navIndex =index;
	  },
	
	  /*bottom*/
	  checkIndex1(index){
	    this.navIndex1 =index;
	  },
	 
	  yhj:function(){
		  console.log('优惠券')
		  this.show=true
	  },
	  xc1:function(){
		  this.show=false
	  },
	  qg1:function(){
	  		  console.log('抢购1')
	  },
	  jumpDetail:function(index){
	  	console.log(index)
	  	uni.navigateTo({
	  		url: './shengqianarea',
	  		success: res => {},
	  		fail: () => {},
	  		complete: () => {}
	  	});
	  }
	},
	
	created() {
		
	}
};
</script>

<style lang="scss">
	.save::-webkit-scrollbar {
	
		width: 0;
		height: 0;
		background-color: transparent;
	}
	.save{
		background-color: #F4F5F7;height: 100vh;overflow: auto;
	}
	.banner{height: 400rpx;position: relative;}
	.banner image{
		display: block;
		width: 100%;
		height: 100%;
	}
	.banner view{
		width: 60rpx;
		height: 200rpx;
		background-color: #FFE2E2;
		text-align: center;
		color: #FF290D;
		font-weight: 900;
		font-size: 35rpx;
		position: absolute;
		right: 0;
		top: 100rpx;
	}
	.nav-top{
		width: 600rpx;
		padding: 20px;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
		position: relative;
		top: -80rpx;
		margin-bottom: -40rpx;
	}
	.head-nav{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.head-nav text{
		display: block;
		text-align: center;
	}
	.activite{
	  font-weight: bold;
	  color: #FF013E;
	}
	.scroll-view{
		width: 100%;
		// height: 160rpx;
		white-space: nowrap;
		overflow: hidden;
		flex-wrap: nowrap;
		
	}
	.scroll-view1{
		width: 35%;
		height: 150rpx;
		background-color: #FFF8F0;
		// display: inline-block;
		border-radius: 10px;
		 margin-left: 10rpx;
		white-space: normal;
		text-align: center;
	}
	.scroll-view1 text{
		display: block;
	}
	.sc-view1-left{
		width: 150rpx;
		height: 150rpx;
		
		border-right: 1px dashed red;
	}
	.sc-view1-left text:nth-child(1){
		font-size: 40rpx;
		color: #FF290D;
		margin-top: 20rpx;
	}
	.sc-view1-left text:nth-child(2){
		font-size: 20rpx;
		color: #FF290D;
	}
	.sc-view1-right{
		width: 100rpx;
		
	}
	.sc-view1-right text{
		width: 90rpx;
		height: 40rpx;
		border-radius: 30rpx;
		background-color: #FF290D;
		color: #fff;
		padding: 10rpx 0;
		margin-top: 40rpx;
		margin-left: 5rpx;
	}
	.foot-nav{
		// display: flex;
		// justify-content: space-between;
		margin-bottom: 20rpx;
		background-color: #fff;box-sizing: border-box;
		//
	}
	.flex{display: flex ;flex-direction: row;justify-content: space-between;}
	.box{
		width: 95%;margin: 0 auto;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
		
	}
	.box .box_view{width: 22%;height: 90rpx;line-height: 80rpx;display: inline-block;}
	.box1{
		width: 180rpx;
		display: inline-block;
		white-space: normal;
		text-align: center;
	}
	.activite1{
		font-size: 35rpx;
	    font-weight: bold;
		border-bottom: 4px solid red;
		
	}
	.flth{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.flth-left{
		width: 325rpx;
		background-color: #fff;
		padding: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.flth-left text{
		display: block;
	}
	.flth-left-top{
		margin-bottom: 20rpx;
	}
	.flth-left-top image{
		width: 90%;
		height: 180rpx;
	}
	.flth-left-foot{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.a{
		font-size: 30rpx;
	}
	.b{
		font-size: 20rpx;
		color: #FF5500;
	}
	.c{
		font-size: 30rpx;
		color: #FF1C1C;
	}
	.d{
		font-size: 20rpx;
		color: #BFBFBF;
	}
	.flth-left-foot view:nth-child(2){
		width: 150rpx;
		background-color: #FF4F1A;
		color: #fff;
		text-align: center;
		border-radius: 30rpx;
		padding: 12rpx 0;
	}
	.navIndex{
		padding: 0 20rpx;
	}
	.h2{
		border-left: 2px solid red;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}
	.foot-h2{
		text-align: center;
		font-size: 25rpx;
		padding: 40rpx 0;
	}
	.yhj{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		padding: 200rpx 0;
	}
	.yhj text{
		display: block;
	}
	.xc{
		width: 50rpx;
		height: 50rpx;
		background-color: yellow;
		border-radius: 50%;
		text-align: center;
		line-height: 50rpx;
		position: relative;
		left: 625rpx;
	}
	.jb{
		width: 600rpx;
		background-color: #FD3912;
		margin: 0 auto;
		padding-top: 20rpx;
		border-radius: 30rpx;
		margin-top: 50rpx;
	}
	.jb1{
		text-align: center;
	}
	.jb1 text:nth-child(1){
		font-size: 50rpx;
		color: #FEEBE4;
		font-weight: bold;
	}
	.jb1 text:nth-child(2){
		font-size: 30rpx;
		color: #FFFBFA;
		margin-bottom: 20rpx;
	}
	.jb2{
		background-color: #FF4E00;
		padding: 20rpx 0;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}
	.jb2 text{
		width: 400rpx;
		height: 120rpx;
		background-color: #FFF1DE;
		margin: 0 auto;
		text-align: center;
		color: #FC0000;
		line-height: 120rpx;
		border-radius: 80rpx;
	}
	.scroll-viewA{
		height: 450rpx;
	}
	.scroll-viewB{
		width: 550rpx;
		height: 150rpx;
		background-color: #FFF8E5;
		margin:0 auto;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
	.sc-viewA-left{
		width: 180rpx;
		line-height: 150rpx;
		text-align: center;
		border-right: 1px dashed red;
	}
	.sc-viewA-right{
		padding: 20rpx 0 20rpx 40rpx;
	}
</style>